import React, { Component } from 'react'
import styles from './index.scss'

export default class SearchInputComponent extends Component {
  constructor(props) {
      super(props);
      this.state = {
        oSearchActive:'',
        val:''
      };
      this.searchOnFocus = this.searchOnFocus.bind(this);
      this.searchOnBlur = this.searchOnBlur.bind(this);
  }
  searchOnBlur(){
    this.setState({
        oSearchActive: ''
    });
  }
  searchOnFocus(){
    this.setState({
        oSearchActive: 'oSearchActive'
    });
  }
  render() {
      const oSearchActive = this.state.oSearchActive;
      let typeName = this.props.name;
      return(
        <div className={styles.searchDiv}>
          <label className={styles.oLabel} htmlFor={typeName}>{this.props.labelName}</label>
          <input type='text' name={typeName}
            className={styles.oSearch+' '+oSearchActive}
            onFocus={this.searchOnFocus}
            onBlur={this.searchOnBlur}
            onChange={this.props.changeVal}
          />
        </div>
      )
  }
}
